<template>
  <!-- <div>
    <template>
      <span>{{$route.meta.firstTitle}}</span>&gt;
      <span>{{$route.meta.secondTitle}}</span>
    </template>
    <div>
       <table>
        <thead>
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>专业</td>
            <td>班级</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in students" :key="item._id">
            <td>{{item._id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.subjectsId?item.subjectsId.name:'无'}}</td>
            <td>{{item.classesId?item.classesId.name:'无'}}</td>
            <td>
              <button @click="goUpdateStudent(item._id)">修改</button>
             
              <button @click="goDetailStudent(item._id)">查看</button>
            </td>
          </tr>
        </tbody>
       </table>
    </div>
  </div> -->
  <div>
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{$route.meta.firstTitle}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.meta.secondTitle}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 分割线 -->
       <el-divider></el-divider>
        <!-- 表格-->
      <el-table :data="students" border stripe>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="subjectsId.name" label="专业"></el-table-column>
        <el-table-column prop="classesId.name" label="班级"></el-table-column>
        <el-table-column prop="imagePath" label="头像">
          <template slot-scope="scope">
            <el-avatar size="large" :src="scope.row.imagePath"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="210px">
          <template slot-scope="scope">
            <el-button type="primary" size="small" 
                       @click="editor(scope.row)">查看</el-button>
            <el-button size="small">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="queryInfo.pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :current-page="queryInfo.currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name:'StudentList',
  data(){
    return{
      list:[],
       queryInfo:{
         currentPage:1,
         pageSize:5
       },
       total:0,
    }
  },
  methods:{
    async getAllStudents(){
      const {data:{total,result}}=await this.$api.students.getStudents(this.queryInfo)
      this.list=result
      this.total=total
    },
     handleCurrentChange(currentPage){
      this.queryInfo.currentPage=currentPage;
      this.getAllStudents(this.queryInfo)
    },
    handleSizeChange(pageSize){
      this.queryInfo.pageSize=pageSize;
      this.getAllStudents(this.queryInfo);
    },
    goUpdateStudent(id){
      this.$router.push({
        path:`/home/studentUpdate/${id}`
      })
    },
    goDetailStudent(id){
      // this.$router.push({
      //   path:`/home/studentsDetail?id=${id}`
      // })
      this.$router.replace({
        path:'/home/studentsDetail',
        query:{
          id
        }
      })
    }
  },
  computed:{
    students(){
      return this.list.filter(item=>item.name)
    }
  },
  created(){
    this.getAllStudents(this.queryInfo)
  }
}
</script>

<style>

</style>